<template>
	<view class="modular">
		<view class="item">
			<input type="text" placeholder="手机号" v-model="phone" @blur="phoneBlur">
		</view>
		<view class="item">
			<input type="text" placeholder="验证码" v-model="code" @blur="codeBlur">
			<text class="button" @click="sendCode"> {{codeMsg}}</text>
		</view>
		<view class="item">
			<input type="password" v-if="passShow" placeholder="请输入密码" v-model="password" @blur="passwordBlur">
			<input type="type" v-else  placeholder="请输入密码" v-model="password" @blur="passwordBlur">
			<image src="../../static/img/login/passswordNotVisible@2x.png" v-if="passShow" @click="passShow = false"></image>
			<image src="../../static/img/login/passwordVisible@2x.png" v-else @click="passShow = true"></image>
		</view>
		<view class="sure" @click="confirm">确认</view>
		<u-modal v-model="showModal" :content="showContent" @confirm="Modalconfim"></u-modal>
	</view>
</template>

<script src="@/static/js/login/modifyPassword.js"></script>

<style lang="scss" scoped>
	.modular {
		height: calc(100vh - 44px);
		width: 750upx;
		padding: 51upx 82upx 0;
		box-sizing: border-box;
		.item {
			position: relative;
			display: flex;
			padding: 82upx 0 0;
			align-items: center;
			input {						
				height: 46upx;
				color: #333333;
				flex: 1;
				padding-bottom: 26upx;
				font-size: 30upx;
				border-bottom: 1upx solid #D6D6D6;
			}
			.button {
				position: absolute;
				right: 0;
				bottom: 26upx;
				color: #04BFAB;
				font-size: 30upx;
			}
			image {
				position: absolute;
				bottom: 26upx;
				right: 10upx;
				width: 30upx;
				height: 30upx;
			}
		}
		.sure {
			background-color: #04BFAB;
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			border-radius: 45upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
			margin: 181upx auto 0;
		}
		uni-button:after {
			border: none;
		}
	}
</style>
